<template>
	<view>
		<view class="main" v-if="isShow">
			<view class="card">
				<view class="title" v-if="storeIds.length == 1">
					<view class="storeName">
						<text class="name" style="margin-right: 20rpx;">{{store.storeName}}</text>
						<u-tag :text="store.deviceCount + '台'" mode="dark" size="mini" style="margin-left: 20rpx;" />
					</view>
					<view class="address">
						{{store.address}}
					</view>
				</view>
				<view class="title" v-else-if="storeIds.length > 1">已选择<text class="count">{{storeIds.length}}</text>个场地
				</view>
				<view class="introduce">
					<text class="preview-title">启动页效果预览</text>
					<text class="preview-detail">可设置礼品上新,优惠活动等消息</text>
				</view>
        <!-- 滚动通知 -->
        <view class="notice" v-if="list.length > 0">
          <view class="notice-left">
            <u-icon name="volume" :label="tag" color="#7E7DF3" size="40rpx" labelSize="28rpx" labelColor="#7E7DF3"/>
          </view>
          <view class="notice-right">
            <u-notice-bar icon=" " mode="horizontal" fontSize="15" :volume-icon="false"  :text="list" class="notice-bar"  bgColor="rgb(217, 226, 255)" color="#7E7DF3"/>
          </view>
        </view>
				<view class="header">
          <view class="member-left">
            <view class="avatar">
              <u--image :src="`${staticFileUrl}/image/my/head-portrait.svg`" width="96rpx" height="96rpx"/>
            </view>
            <view class="member-name">
              <u-icon size="16" :name="imgURL+'fixed/client-v2/image/pay/coin-changer-money.svg'"></u-icon>
              <text class="member-money">666</text>
            </view>
          </view>
          <view class="u-flex-row">
            <u--image :src="`${imgURL}fixed/client-v2/image/pay/ufo-catcher-expense.svg`" width="120rpx" height="106rpx"/>
            <view class="u-m-r-30"></view>
            <u--image :src="`${imgURL}fixed/client-v2/image/common/service3.png`" width="120rpx" height="106rpx"/>
          </view>
				</view>
			</view>
			<view class="card">
				<view class="message-title">
					<view class="message-title-left">
						消息内容
					</view>
					<view class="message-title-right" @click="showModalContent(null)">
						添加
					</view>
				</view>
				<view class="line">
					<u-row gutter="16" justify="between" @click="radioContentChange(null)">
						<u-col span="12" class="line-left">
							<u-radio-group v-model="radioGroupContent" size="20">
								<u-radio activeColor="#6072FF" shape="circle" :name="0"></u-radio>
								<view class="message u-lint-ellipsis-1">无消息</view>
							</u-radio-group>
							
						</u-col>
					</u-row>
				</view>
				<view class="line" v-for="(item,index) in noticeMessageContentList" :key="index">
					<u-row gutter="16" justify="between">
						<u-col span="8" class="line-left" @click="radioContentChange(item)">
							<u-radio-group v-model="radioGroupContent" size="20">
								<u-radio activeColor="#6072FF" shape="circle" :name="item.id" @change="radioContentChange(item)"></u-radio>
								<view class="message u-lint-ellipsis-1">{{item.content}}</view>
								
							</u-radio-group>
						</u-col>
						<u-col span="4">
							<view class="line-right">
								<view style="margin-right: 20rpx;">
									<u-button type="primary" size="mini" class="edit" @click="showModalContent(item)">编辑
									</u-button>
								</view>
								<view>
									<u-button type="error" size="mini" @click="delContent(item)">删除</u-button>
								</view>
							</view>
						</u-col>
					</u-row>
				</view>
			</view>
			<view class="card" :style="{'margin-bottom' : '200rpx'}">
				<view class="message-title">
					<view class="message-title-left">
						消息标签
					</view>
					<view class="message-title-right" @click="showModalTag(null)">
						添加
					</view>
				</view>
				<view class="line" v-for="(item,index) in noticeMessageTagList" :key="index">
					<u-row gutter="16" justify="between" @click="radioTagChange(item)"
						:class="radioGroupTag == 0 ? 'disabled' : ''">
						<u-col span="8" class="line-left">
							<u-radio-group v-model="radioGroupTag" size="20" @change="radioTagChange(item)">
								<u-radio activeColor="#6072FF" shape="circle" :name="item.id" :disabled="radioGroupTag == 0 ? true : false">
								</u-radio>
								<view class="message">{{item.tag}}</view>
							</u-radio-group>
							
						</u-col>
						<u-col span="4">
							<view class="line-right" v-if="item.userId != 0">
								<view style="margin-right: 20rpx;">
									<u-button type="primary" size="mini" class="edit" @click="showModalTag(item)">编辑
									</u-button>
								</view>
								<view>
									<u-button type="error" size="mini" @click="delTag(item)">删除</u-button>
								</view>
							</view>
						</u-col>
					</u-row>
				</view>
			</view>
		</view>
		<empty :emptyTitle="'暂无信息,请重新访问'" v-else></empty>
		<view class="nextBtn" id="btn" v-if="isShow">
			<view class="btn">
				<u-button type="primary" shape="circle" @click="submit">保存</u-button>
			</view>
		</view>
		<u-modal :show="isContentShow" :title-style="{color: '#000'}" :show-cancel-button="true"
			:title="noticeMessageContent.id > 0 ? '编辑消息内容' : '添加消息内容'" confirm-text="保存" @confirm="contentEdit"
			 ref="contentModal" @cancel="hideContent">
			<view class="slot-content">
				<textarea v-model="noticeMessageContent.content" placeholder="50个字以内" autoHeight
				 class="noticeMessage2"  maxlength="50"></textarea>
			</view>
		</u-modal>
		<u-modal :show="isTagShow" :title-style="{color: '#000'}" :show-cancel-button="true"
			:title="noticeMessageTag.id > 0 ? '编辑标签内容' : '添加标签内容'" confirm-text="保存" @confirm="tagEdit"
			 ref="contentModal" @cancel="hideTag">
			<view class="slot-content">
				<u-input v-model="noticeMessageTag.tag" :custom-style="{'padding':'5rpx 20rpx'}" type="text"
					border="bottom" class="noticeMessage" :clearable="true" placeholder="6个字以内" maxlength="6" fontSize="28rpx" />
			</view>
		</u-modal>
	</view>
</template>

<script>
	import store from '@/components/store/store.vue'
	export default {
		components: {
			store
		},
		data() {

			return {
        imgURL: this.$configPath.imgURL,
        staticFileUrl: this.$configPath.staticFileUrl,
				isShow: true,
				storeIds: [],
				store:store,
				list: [],
				tag: '',
				radioGroupContent: 0,
				radioGroupTag: 0,
				noticeMessageContentList: [],
				noticeMessageTagList: [],
				isContentShow: false,
				isTagShow: false,
				noticeMessageContent: {
					id: 0,
					content: '',
				},
				noticeMessageTag: {
					id: 0,
					tag: '',
				},
				batch: false
			}
		},
		onLoad(param) {
			if (param.batch != null) {
				this.batch = param.batch;
			}
			if (param.storeIds != null) {
				if (JSON.parse(param.storeIds).length > 1) {
					this.storeIds = JSON.parse(param.storeIds);
					this.findNoticeMessageContentList();
				} else if (JSON.parse(param.storeIds).length == 1) {
					this.storeIds = JSON.parse(param.storeIds);
					this.findStore(this.storeIds[0]);
				}
			}

		},
		methods: {
			findStore(id) {
				uni.showLoading({
					title: '请稍等...',
					mask: true
				})
				this.$api('merchantStore.findMerchantStoreByUserIdByStoreId', {
					id: id
				}).then(res => {
					if (res.data != null) {
						this.store = res.data;
						if (this.store.noticeMessageContentId > 0) {
							this.radioGroupContent = this.store.noticeMessageContentId;
							this.list = [this.store.content];
							if (this.store.noticeMessageTagId > 0) {
								this.radioGroupTag = this.store.noticeMessageTagId;
								this.tag = this.store.tag;
							}
						}
						this.findNoticeMessageContentList();
					} else {
						uni.hideLoading();
						this.$helpers.toast("访问失败!请重新访问!");
						return;
					}
				})
			},
			findNoticeMessageContentList() {
				this.$api('noticeMessageContent.findByUserIdList').then(res => {
					this.noticeMessageContentList = res.data;
					this.findNoticeMessageTagList();
				})
			},
			findNoticeMessageTagList() {
				this.$api('noticeMessageTag.findByUserIdAndCurrentList').then(res => {
					uni.hideLoading();
					if (res.data != null) {
						this.isShow = true;
						this.noticeMessageTagList = res.data;
					} else {
						this.$helpers.toast("访问失败!请重新访问!");
						return;
					}

				})
			},
			radioContentChange(item) {
				if (item == null) {
					this.radioGroupContent = 0;
					this.radioGroupTag = 0;
					this.list = [];
				} else {
					// 如果当前选中的是点击的那个单选框就直接给他返回
					if (item.id == this.radioGroupContent) {
						return;
					}
					if (this.radioGroupContent == 0) {
						if (this.noticeMessageTagList.length > 0) {
							// 当从无消息点过去之后,把标签变成列表中的第一个,默认给他选上
							this.radioGroupTag = this.noticeMessageTagList[0].id;
							this.tag = this.noticeMessageTagList[0].tag;
						}
					}
					this.radioGroupContent = item.id;
					this.list = [item.content];
				}
			},
			radioTagChange(item) {
				if (this.radioGroupTag == 0) {
					return;
				}
				this.radioGroupTag = item.id;
				this.tag = item.tag;
			},
			showModalContent(item) {
				if (item != null) {
					this.noticeMessageContent = {
						id: item.id,
						content: item.content
					}
				}
				this.isContentShow = true;
			},
			hideContent() {
				this.isContentShow = false;
				this.noticeMessageContent = {
					id: 0,
					content: null
				}
			},
			contentEdit() {
				uni.showLoading({
					title: '保存中...',
					mask: true
				})
				if (this.noticeMessageContent.content == null || this.noticeMessageContent.content == '') {
					this.$helpers.toast('请输入消息内容');
					this.$refs.contentModal.clearLoading();
					return;
				}
				if (this.noticeMessageContent.content.length > 50) {
					this.$helpers.toast('消息内容不能超过50个字');
					this.$refs.contentModal.clearLoading();
					return;
				}
				this.$api('noticeMessageContent.edit', this.noticeMessageContent).then(res => {
					uni.hideLoading();
					if (res.status == 1) {
						this.$helpers.toast(res.msg);
						return;
					} else {
						this.$helpers.toast("保存成功");
            this.noticeMessageContentList = [];
            this.noticeMessageTagList = [];
						if (this.noticeMessageContent.id == this.radioGroupContent) {
							if (this.noticeMessageContent.id > 0) {
								this.list = [this.noticeMessageContent.content];
							}
						}
						this.hideContent();
						this.findNoticeMessageContentList();
					}
				})
			},
			delContent(item) {
				let this2 = this;
				uni.showModal({
					title: '提示',
					content: '确定要删除消息内容?',
					success: function(res) {
						if (res.confirm) {
							uni.showLoading({
								title: '请稍等...',
								mask: true
							})
							this2.$api('noticeMessageContent.del', {
								id: item.id,
								storeIds: this2.storeIds
							}).then(res => {
								uni.hideLoading();
								if (res.data > 0) {
									this2.$helpers.toast("删除成功");
                  this2.noticeMessageContentList = [];
                  this2.noticeMessageTagList = [];
									this2.findNoticeMessageContentList();
									if (item.id == this2.radioGroupContent) {
										this2.radioGroupContent = 0;
										this2.radioGroupTag = 0;
										this2.list = [];
									}
								} else {
									this2.$helpers.toast("删除失败");
								}
							})
						}
					}
				});
			},
			showModalTag(item) {
				if (item != null) {
					this.noticeMessageTag = {
						id: item.id,
						tag: item.tag
					}
				}
				this.isTagShow = true;
				console.log(this.isTagShow)
				
			},
			hideTag() {
				this.isTagShow = false;
				this.noticeMessageTag = {
					id: 0,
					tag: null
				}
			},
			tagEdit() {
				uni.showLoading({
					title: '保存中...',
					mask: true
				})
				if (this.noticeMessageTag.tag == null || this.noticeMessageTag.tag == '') {
					this.$helpers.toast('请输入标签名称');
					this.$refs.contentModal.clearLoading();
					return;
				}
				if (this.noticeMessageTag.tag.length > 6) {
					this.$helpers.toast('标签名称不能超过6个字');
					this.$refs.contentModal.clearLoading();
					return;
				}
				this.$api('noticeMessageTag.edit', this.noticeMessageTag).then(res => {
					uni.hideLoading();
					if (res.status == 1) {
						this.$helpers.toast(res.msg);
						return;
					} else {
						this.$helpers.toast("保存成功");
						if (this.noticeMessageTag.id == this.radioGroupTag) {
							if (this.noticeMessageTag.id > 0) {
								this.tag = this.noticeMessageTag.tag;
							}
						}
						this.hideTag();
						this.findNoticeMessageTagList();
					}
				})
			},
			delTag(item) {
				let this2 = this;
				uni.showModal({
					title: '提示',
					content: '确定要删除[' + item.tag + ']标签?',
					success: function(res) {
						if (res.confirm) {
							uni.showLoading({
								title: '请稍等...',
								mask: true
							})
							this2.$api('noticeMessageTag.del', {
								id: item.id,
								storeIds: this2.storeIds
							}).then(res => {
								uni.hideLoading();
								if (res.data > 0) {
									this2.$helpers.toast("删除成功");
									this2.findNoticeMessageTagList();
									if (item.id == this2.radioGroupTag) {
										this2.radioGroupTag = this2.noticeMessageTagList[0].id;
										this2.tag = this2.noticeMessageTagList[0].tag;
									}
								} else {
									this2.$helpers.toast("删除失败");
								}
							})
						}
					}
				});
			},
			submit() {
				if (this.radioGroupContent < 0) {
					this.$helpers.toast("请选择消息内容");
					return;
				}
				if (this.radioGroupContent == 0) {
					if (this.radioGroupTag > 0) {
						this.$helpers.toast("出错了,请重新刷新页面");
						return;
					}
				}
				if (this.radioGroupContent > 0) {
					if (this.radioGroupTag <= 0) {
						this.$helpers.toast("请选择消息标签");
						return;
					}
				}
				uni.showLoading({
					title: '保存中...',
					mask: true
				})
				let param = {
					storeIds: this.storeIds,
					noticeMessageContentId: this.radioGroupContent,
					noticeMessageTagId: this.radioGroupTag
				}
				this.$api('merchantStore.updateMessage', param).then(res => {
					uni.hideLoading();
					if (res.status == 0) {
						this.$helpers.toast("保存成功");
						setTimeout(() => {
							uni.navigateBack({
								delta: this.batch ? 2 : 1
							});
							uni.$emit('edit', "true")
							// uni.redirectTo({
							// 	url:'../brand-info-message'
							// })
						}, 1000)
					} else {
						this.$helpers.toast("保存失败");
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: $u-bg-color;
	}

	.main {
		padding: $u-padding-medium $u-padding-large;
		color: rgba(0, 0, 0, 0.7);
		font-size: $f-base;

		.card {
			margin-bottom: $u-margin-medium;
			padding: $u-padding-medium;
			background-color: white;
			border-radius: $u-margin-medium;

			.title {
				padding: $u-padding-mini 0;
				color: $u-tips-color;
				
				.storeName {
					display: flex;
					align-items: center;

					.name {
						font-weight: 520;
						color: $u-content-color;
					}
				}

				.address {
					font-size: $uni-font-size-sm + 3;
					margin-top: $u-margin-mini;
				}

				.count {
					color: $u-primary;
				}
			}

			.introduce {
				margin-top: $u-margin-medium;
        margin-bottom: $u-margin-medium;

				.preview-title {
					font-weight: 520;
					font-size: $uni-font-size-lg - 2;
				}

				.preview-detail {
					font-size: $uni-font-size-sm;
					color: $u-tips-color;
					margin-left: $u-margin-medium;
				}
			}
      .notice {
        .notice-left {
          float: left;
          animation: showLayer 0.3s linear both;
          display: flex;
          justify-content: space-between;
          align-items: center;
          background-color: rgb(217, 226, 255);
          padding-left: 20rpx;
          padding-top: 6rpx;
        }

        .notice-right {
          .notice-bar {
            animation: showLayer 0.3s linear both;
          }
        }

        @keyframes showLayer {
          0% {
            height: 0;
          }
          100% {
            height: 70rpx;
          }
        }
      }

			.header {
				padding: 20rpx 30rpx;
				background-color: #B09AEE;
        border-bottom-left-radius: 20rpx !important;
        border-bottom-right-radius: 20rpx !important;
        display: flex;
        flex-direction: row;
        justify-content: space-between;

        .member-left {
          display: flex;
          flex-direction: row;
        }

        .avatar {
          z-index: 9999;
        }

        .member-name {
          min-width: 100rpx;
          height: 65rpx;
          color: rgb(255, 255, 255);
          font-size: 32rpx;
          padding: 0rpx 18rpx 0rpx 35rpx;
          background: rgba(255, 255, 255, 0.3);
          border-radius: 0 60rpx 60rpx 0;
          display: flex;
          flex-direction: row;
          margin-top: 20rpx;
          align-items: center;
          position: absolute;
          left: 150rpx;
          .member-money {
            font-size: 41rpx;
            line-height: 50rpx;
            letter-spacing: 1rpx;
            margin-left: 8rpx;
          }
        }

			}

			.message-title {
				display: flex;
				justify-content: space-between;
				align-items: center;
				
				.message-title-left {
					font-size: $uni-font-size-lg - 2;
					color: $u-tips-color;
				}

				.message-title-right {
					font-size: $f-sm;
					color: $u-primary;
				}
			}

			.line {
				padding: $u-padding-large 0;
				border-radius: 20rpx;
				color: $u-content-color;

				.line-left {
					display: flex;
					align-items: center;
					font-size: $uni-font-size-lg - 1;
					font-weight: 450;

					.message {
						margin-left: -20rpx;
					}
				}

				.line-right {
					display: flex;
					justify-content: flex-end;
					align-items: center;
					color: #999;
					font-size: $uni-font-size-base;
				}

				.disabled {
					color: $u-light-color;
				}
			}
		}
	}

	.nextBtn {
		z-index: 99;
		border-top: 1px solid #fafafa;
		width: 100%;
		height: 166rpx;
		background-color: white;
		position: fixed;
		bottom: 0rpx;
		font-size: $f-base;
		.btn {
			margin-top: 20rpx;
			padding: 0 $u-padding-medium $u-padding-medium $u-padding-medium;
		}
	}

	.slot-content {
		padding: 30rpx;

		.noticeMessage {
			background-color: $u-bg-color;
			border-radius: $uni-border-radius-lg + 3;
		}
		.noticeMessage2{
			background-color: white;
			// border-radius: $uni-border-radius-lg + 3;
			border-bottom: #DADBDE 1rpx solid;
			font-size: 28rpx;
			width: 350rpx;
			padding: 10rpx;
			
		}
	}
</style>
